<template>
  <section class="department_detail_baseInfo">
    <h3 class="department_detail_baseInfo__title">基础信息</h3>
    <div class="department_detail_baseInfo__content">
      <div class="department_detail_baseInfo__content">
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">部门名称：</span>
          <span class="department_detail_baseInfo__item_value">{{baseInfo && baseInfo['name'] ? baseInfo['name'] : '-'}}</span>
        </div>
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">部门代码：</span>
          <span class="department_detail_baseInfo__item_value">{{baseInfo && baseInfo['code'] ? baseInfo['code'] : '-'}}</span>
        </div>
         <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">部门标签：</span>
          <span class="department_detail_baseInfo__item_value">
            <span v-if="baseInfo && baseInfo['labelList'] && baseInfo['labelList'].length">
              <span v-for="(item, index) in baseInfo['labelList']"
                    :key="index">
                {{index === (baseInfo['labelList'].length - 1) ? item.name : item.name + '、'}}
              </span>
            </span>
            <span v-else>-</span>
          </span>
        </div>
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">员工数：</span>
          <span class="department_detail_baseInfo__item_value">{{baseInfo && baseInfo['peopleCount'] ? baseInfo['peopleCount'] : '0'}}</span>
        </div>
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">直属上级：</span>
          <span class="department_detail_baseInfo__item_value">{{baseInfo && baseInfo['parentOrganization'] ? baseInfo['parentOrganization'].name : '-'}}</span>
        </div>
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">部门说明：</span>
          <span class="department_detail_baseInfo__item_value">{{baseInfo && baseInfo['level'] ? `${baseInfo['level']}级部门` : '-'}}</span>
        </div>
        <div class="department_detail_baseInfo__item">
          <span class="department_detail_baseInfo__item_name">部门岗位：</span>
          <span class="department_detail_baseInfo__item_value"><span v-if="baseInfo && baseInfo['jobList'] && baseInfo['jobList'].length">
              <span v-for="(item, index) in baseInfo['jobList']"
                    :key="index">
                {{index === (baseInfo['jobList'].length - 1) ? item.name : item.name + '、'}}
              </span>
            </span>
            <span v-else>-</span>
          </span>
        </div>
      </div>
    </div>
  </section>
</template>
<script>
import { mapGetters } from "vuex";
export default {
  name: "departmentDetailBaseInfo",
  data () {
    return {
    };
  },
  computed: {
    ...mapGetters({
      baseInfo: "departmentDetail/baseInfo"
    })
  },
};
</script>
<style lang="scss" scoped>
.department_detail_baseInfo {
  border-top: 2px solid rgba(135, 163, 255, 1);
  background: rgba(242, 245, 253, 1);
  padding: 16px;
}
.department_detail_baseInfo__content {
  overflow: hidden;
}
.department_detail_baseInfo__title {
  font-size: 14px;
  font-weight: 400;
  color: rgba(51, 51, 51, 1);
  border-left: 3px solid #3f6bff;
  padding-left: 6px;
  line-height: 16px;
  margin-bottom: 16px;
}
.department_detail_baseInfo__item {
  width: 33.333333%;
  float: left;
  font-size: 14px;
  margin-bottom: 16px;
}
.department_detail_baseInfo__item_name {
  color: #666666;
}
.department_detail_baseInfo__item_value {
  color: #333333;
  margin-left: 5px;
}
</style>
